﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JooQuery :: Test Space</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic"
        rel="stylesheet" />
    <style>        
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
        
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
        body { line-height: 1; }
        ol, ul { list-style: none; }
        blockquote, q { quotes: none; }
        blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
        
        table { border-collapse: collapse; border-spacing: 0; }
        
        
        body { font-family: 'PT Sans' , sans-serif; min-height: 740px; background: rgb(215, 215, 215); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); -webkit-font-smoothing: antialiased; }
        
        b, strong { font-weight: bold; }
        i, em { font-style: italic; }
        
        a { color: inherit; text-decoration: none; padding: 0 0.1em; background: rgba(255,255,255,0.5); text-shadow: -1px -1px 2px rgba(100,100,100,0.9); border-radius: 0.2em; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
        
        a:hover { background: rgba(255,255,255,1); text-shadow: -1px -1px 2px rgba(100,100,100,0.5); }
        
        /* COMMON STEP STYLES */        
        .step { width: 900px; padding: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-family: 'PT Serif' , georgia, serif; font-size: 48px; line-height: 1.5; }
        
        /* fade out inactive slides */        
        .step { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; }        
        .step:not(.active) { opacity: 0.3; }
        
        /* STEP SPECIFIC STYLES */        
       
        /* impress.js title */        
        #title { padding: 0; }        
        #title .try { font-size: 64px; position: absolute; top: -0.5em; left: 1.5em; -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); -ms-transform: translateZ(20px); -o-transform: translateZ(20px); transform: translateZ(20px); }        
        #title h1 { font-size: 190px; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); -ms-transform: translateZ(50px); -o-transform: translateZ(50px); transform: translateZ(50px); }        
        #title .footnote { font-size: 32px; }
                
        /* big thoughts */        
        #big { width: 600px; text-align: center; font-size: 60px; line-height: 1; }        
        #big b { display: block; font-size: 250px; line-height: 250px; }        
        #big .thoughts { font-size: 90px; line-height: 150px; }
        
        /* tiny ideas */        
        #tiny { width: 500px; text-align: center; }        
        #ing { width: 500px; }        
        #ing b { display: inline-block; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }        
        #ing.active .positioning { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -ms-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; }        
        #ing.active .rotating { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-transition-delay: 1.75s; -moz-transition-delay: 1.75s; -ms-transition-delay: 1.75s; -o-transition-delay: 1.75s; transition-delay: 1.75s; }        
        #ing.active .scaling { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; }        
        
        /* imagination */        
        #imagination { width: 600px; }        
        #imagination .imagination { font-size: 78px; }
        
        /* use the source, Luke */        
        #source { width: 700px; padding-bottom: 300px; /* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */ background-image: url(); background-position: bottom right; background-repeat: no-repeat; }        
        #source q { font-size: 60px; }
        
        /* it's in 3D */        
        #its-in-3d span, #its-in-3d b { display: inline-block; -webkit-transform: translateZ(40px); -moz-transform: translateZ(40px); -ms-transform: translateZ(40px); -o-transform: translateZ(40px); transform: translateZ(40px); -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }        
        #its-in-3d .have { -webkit-transform: translateZ(-40px); -moz-transform: translateZ(-40px); -ms-transform: translateZ(-40px); -o-transform: translateZ(-40px); transform: translateZ(-40px); }        
        #its-in-3d .you { -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); -ms-transform: translateZ(20px); -o-transform: translateZ(20px); transform: translateZ(20px); }        
        #its-in-3d .noticed { -webkit-transform: translateZ(-40px); -moz-transform: translateZ(-40px); -ms-transform: translateZ(-40px); -o-transform: translateZ(-40px); transform: translateZ(-40px); }        
        #its-in-3d .its { -webkit-transform: translateZ(60px); -moz-transform: translateZ(60px); -ms-transform: translateZ(60px); -o-transform: translateZ(60px); transform: translateZ(60px); }        
        #its-in-3d .in { -webkit-transform: translateZ(-10px); -moz-transform: translateZ(-10px); -ms-transform: translateZ(-10px); -o-transform: translateZ(-10px); transform: translateZ(-10px); }        
        #its-in-3d .footnote { font-size: 32px; -webkit-transform: translateZ(-10px); -moz-transform: translateZ(-10px); -ms-transform: translateZ(-10px); -o-transform: translateZ(-10px); transform: translateZ(-10px); }        
        #its-in-3d.active span, #its-in-3d.active b { -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); -ms-transform: translateZ(0px); -o-transform: translateZ(0px); transform: translateZ(0px); -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; }
        
        /* overview step */        
        #overview { z-index: -1; padding: 0; }
        
        /* on overview step everything is visible */        
        #impress.step-overview .step { opacity: 1; cursor: pointer; }
        
        /* SLIDE STEP STYLES */        
        .slide { display: block; width: 900px; height: 700px; padding: 40px 60px; border-radius: 10px; background-color: white; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); border: 1px solid rgba(0, 0, 0, .3); font-family: 'Open Sans' , Arial, sans-serif; color: rgb(102, 102, 102); text-shadow: 0 2px 2px rgba(0, 0, 0, .1); font-size: 30px; line-height: 36px; letter-spacing: -1px; }        
        .slide q { display: block; font-size: 50px; line-height: 72px; margin-top: 100px; }        
        .slide q strong { white-space: nowrap; }  
              
        /* IMPRESS NOT SUPPORTED STYLES */        
        .fallback-message { font-family: sans-serif; line-height: 1.3; display: none; width: 780px; padding: 10px 10px 0; margin: 20px auto; border-radius: 10px; border: 1px solid #E4C652; background: #EEDC94; }        
        .fallback-message p { margin-bottom: 10px; }        
        .impress-not-supported .step { position: relative; opacity: 1; margin: 20px auto; }        
        .impress-not-supported .fallback-message { display: block; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery/json2.js"></script>
    <script type="text/javascript" src="../scripts/jquery/livequery.js"></script>
    <script type="text/javascript" src="../scripts/core.js?v=12"></script>
    <script type="text/javascript" src="../scripts/domdata.js?v=1"></script>
    <script type="text/javascript" src="../scripts/events.js?v=1"></script>
    <script type="text/javascript" src="../scripts/log.js?v=1"></script>
    <script type="text/javascript" src="../scripts/bootloader.js?v=12345"></script>
    <script type="text/javascript" src="../scripts/behaviors.js?v=12345"></script>
    <script type="text/javascript" src="../scripts/dependencies.js?v=12345"></script>
    <script type="text/javascript">
        _scriptsRoot = "../Scripts/";    
    </script>
</head>
<body>
    <div id="impress" data-behaviors-eager="Presentation.Impress.Canvas" data-canvas-class="canvas" data-start-step="0" data-not-supported-class="impress-not-supported">
        <div class="canvas" > 
            <div class="fallback-message">
                <p>
                    Your browser <b>doesn't support the features required</b> by impress.js, so you
                    are presented with a simplified version of this presentation.</p>
                <p>
                    For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser.
                    Firefox 10 (to be released soon) will also handle it.</p>
            </div>
            <div id="callout" class="step" data-x="-1000" data-y="-1500" data-behaviors-eager="Presentation.Impress.Step"
                onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="1">
                <p>Do you <b>hate</b> UI development for the web?</p>
            </div>
            
            <div class="step slide" data-x="0" data-y="-1500" data-behaviors-eager="Presentation.Impress.Step"
                onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="2">
                <q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't
                    <strong>copy the limits</strong> of 'classic' slide decks?</q>
            </div>
            <div class="step slide" data-x="1000" data-y="-1500" data-behaviors-eager="Presentation.Impress.Step"
                onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="3">
                <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong>
                    of your talk?</q>
            </div>
            <div id="title" class="step" data-x="0" data-y="0" data-scale="4" data-behaviors-eager="Presentation.Impress.Step"
                onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="4">
                <span class="try">then you should try</span>
                <h1>
                    impress.js<sup>*</sup></h1>
                <span class="footnote"><sup>*</sup> no rhyme intended</span>
            </div>
            <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5"
                data-behaviors-eager="Presentation.Impress.Step" onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="5">
                <p>
                    It's a <strong>presentation tool</strong>
                    <br />
                    inspired by the idea behind <a href="http://prezi.com">prezi.com</a>
                    <br />
                    and based on the <strong>power of CSS3 transforms and transitions</strong> in modern
                    browsers.</p>
            </div>
            <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6"
                data-behaviors-eager="Presentation.Impress.Step" onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="6">
                <p>
                    visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
            </div>
            <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300"
                data-scale="1" data-behaviors-eager="Presentation.Impress.Step" onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="7">
                <p>
                    and <b>tiny</b> ideas</p>
            </div>
            <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6"
                data-behaviors-eager="Presentation.Impress.Step" onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="8">
                <p>
                    by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and
                    <b class="scaling">scaling</b> them on an infinite canvas</p>
            </div>
            <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6" data-behaviors-eager="Presentation.Impress.Step"
                onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="9">
                <p>
                    the only <b>limit</b> is your <b class="imagination">imagination</b></p>
            </div>
            <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4"
                data-behaviors-eager="Presentation.Impress.Step" onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="10">
                <p>
                    want to know more?</p>
                <q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
            </div>
            <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2"
                data-behaviors-eager="Presentation.Impress.Step" onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="11">
                <p>
                    one more thing...</p>
            </div>
            <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40"
                data-rotate-y="10" data-scale="2" data-behaviors-eager="Presentation.Impress.Step"
                onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="12">
                <p>
                    <span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span>
                    <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
                <span class="footnote">* beat that, prezi ;)</span>
            </div>
            <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10" data-behaviors-eager="Presentation.Impress.Step"
                onclick="$(this).parent().broadcast('hideThisStep');$(this).msg('showThisStep')"
                data-step-number="0">
            </div>
        </div>
    </div>
</body>
</html>
